<section>
  <d-tabs [(activeTab)]="tabActiveId">
    <d-tab *ngFor="let item of tabsDisplay" [id]="item.id">
      <ng-template dTabTitle>
        <span class="tab-configurable">{{ item.name }}</span>
      </ng-template>
    </d-tab>
  </d-tabs>
  <span class="more-tabs" dDropDown dDropDownToggle appendToBody [trigger]="'click'" [style.left.px]="leftOffset">
    <span>more</span>
    <span class="icon-chevron-down"></span>
    <div dDropDownMenu>
      <ng-template
        [ngTemplateOutlet]="dropDownMenuTpl"
        [ngTemplateOutletContext]="{
          $implicit: this
        }"
      >
      </ng-template>
    </div>
  </span>
  <ng-template #dropDownMenuTpl>
    <div class="tabs-menu-container">
      <li *ngFor="let tab of tabsHidden" [class.menu-tab-active]="tab.id === tabActiveId" (click)="selectForConfigTab(tab.id)">
        {{ tab.name }}
      </li>
      <div class="line"></div>
      <li (click)="openTransferDialog('standard')" class="setting-container">
        <span class="icon-setup"> </span>
        <span style="margin-left: 5px">setting</span>
      </li>
    </div>
  </ng-template>
  <pre>activeID: {{ tabActiveId | json }}</pre>
</section>
